<div class="carousel-background">
	<section class="container">
		<div id="carousel">
			<#list listeMedias as child>
				<figure id="figure${child_index + 1}">
					<a id="link${child_index + 1}" >	
						<img src="${child.urlCover}" width="90" height="135" />
					</a>
				</figure>
			</#list>
	  	</div>
  	</section>
</div>

<div>
	 <section id="options">
	 	<p id="navigation">
	 		<button id="previous" data-increment="-1">Previous</button>
	 		<button id="next" data-increment="1">Next</button>
	 	</p>
    </section>
</div>

<div id="ficheMedia">
	<table cellspacing=4 id="table-fiche-media">
		<tbody>
			<!-- parcours de la liste des médias -->
			<#list listeMedias as child>
				<tr>
					<td width="25%">${child.titre}</td>
					<td width="25%">${child.genreMedia}</td>
					<td width="25%">${child.auteurMedia}</td>
					<td width="25%">${child.dateMedia}</td>
		    	</tr>
			</#list>
		</tbody>
	</table>	
</div>

<script type="text/javascript">//<![CDATA[
	jQuery(function ($) {
		
		$(document).ready( function() {
			
			// Manque juste l'authentification auto sur Alfresco (essayer dans le js d'apeller le WS d'authentification pour récup le ticket !)
			$('#carousel img').each(function() {
    			var urlImg = $(this).attr("src");
    			var newUrl = window.location.protocol + "//" + window.location.host + urlImg;
    			$(this).attr("src",newUrl);
			});
			
			var filmSelected = 0
			var espaceFigure = 100 ; // Espace entre les figures
			var zoom = 350 ; // Facteur zoom sur l'élément sélectionné dans le carousel
			
			var nbMedias = $('#carousel figure').length
			var navButtons = $('#navigation').find(":button");
			var figuresPositions = new Array();
			
			// On initialise le carousel en positionnant les medias par rapport au nombre et à la taille de ceux-ci
			moveCarousel(0, figuresPositions);
		
			onNavButtonClick = function( event ){
				var increment = parseInt( event.target.getAttribute('data-increment'));
				if(figuresPositions[0]!=0 || increment == 1){
					var increment = parseInt( event.target.getAttribute('data-increment'))*-1;
					moveCarousel(increment,figuresPositions);
				}
			};
		
			for (var i=0; i < 2; i++) {
				navButtons[i].addEventListener( 'click', onNavButtonClick, false);
			}
			
			// Si l'utilisateur clique sur l'un des films du carousel
			// on sélectionne alors le film et on le met au centre du carousel
			$("#carousel a").click(function () {
				selectFilmOnClickCarousel(this)
			});
			
			
			function selectFilmOnClickCarousel(element){
				var increment = filmSelected - $('#carousel a').index(element) ;				
				moveCarousel(increment,figuresPositions);
				$( '#ficheMedia' ).show( 'bounce');
			}
			
			// ======================================================================================================================================================
			// Méthode qui permet de déplacer les éléments du carousel en fonction des évènement déclenchés par interactions			
			function moveCarousel(increment, tabPositions){
				
				// Boucle sur le nombre de medias à afficher dans le carouseul
				for(itMedia=0 ; itMedia<nbMedias ; itMedia++){
					// increment == 0 : Cas de l'initialisation du carousel : calcul des positions en fonction juste du nombre de medias et de l'espacement entre eux
					if(increment == 0){
						tabPositions[itMedia] = itMedia*espaceFigure ;
					} else{
						// Sinon on calcule la nouvelle position de chaque nouveau media par rapport à la position cible sélectionnée soit :
						// - par le biais des boutons suivant et précedent
						// - soit en cliquant directement sur une affiche dans le carousel 
						tabPositions[itMedia] = tabPositions[itMedia] + increment*espaceFigure;
					}
					
					$('#figure'+(itMedia+1)).css("-moz-transform", "translateX("+tabPositions[itMedia]+"px)");
					if(tabPositions[itMedia] == 0){
						$('#figure'+(itMedia+1)).css('-moz-transform', 'translateZ('+zoom+'px)');
						filmSelected = itMedia ; 
					} else {
						if(tabPositions[itMedia] > 3*espaceFigure || tabPositions[itMedia] < -3*espaceFigure){
							$('#figure'+(itMedia+1)).css('opacity', '0');
							$('#figure'+(itMedia+1)).delay(500).fadeOut(100);
							
						} else {
							$('#figure'+(itMedia+1)).css('opacity', '1');		
							$('#figure'+(itMedia+1)).fadeIn('fast');
						}
					
					}
				}
			}
			
			// ======================================================================================================================================================
			// ======================================================================================================================================================
		});		
	});
	
//]]>
</script>